<script setup lang='ts'>
import { reactive } from 'vue';
import { useRouter } from 'vue-router'
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
const base = import.meta.env.BASE_URL
const router = useRouter()
const orgList = reactive([
  {
    logo: base + "44761321.jpg",
    company: '康普尼',
    createAt: '2022-12-31',
    call: '13333333333',
    anchorSize: '200-500'
  },
  {
    logo: base + "52823142.jpg",
    company: '康普',
    createAt: '2022-12-31',
    call: '13333333333',
    anchorSize: '200-500'
  }
])
function jump() {
  router.push({ name: 'cooperation-anchor-institutional-contracts' })
}
</script>

<template>
  <div class="2xl:w-1/2 xl:w-3/5 lg:w-4/5 py-8 mx-auto">
    <div class="flex items-center justify-between  px-8 ">
      <div>
      </div>
      <div>
        <ElInput placeholder="输入机构名称">
          <template #append>
            <ElButton :icon="useRenderIcon('ep:search')"></ElButton>
          </template>
        </ElInput>
      </div>
    </div>
    <ElCard shadow="hover" class="mt-4" v-for="org of orgList">
      <div class="flex items-center gap-8 ">
        <ElImage :src="org.logo" class="size-20" :alt="org.company" srcset=""></ElImage>
        <ElDescriptions class="grow" :title="org.company" border>
          <template #extra>
            <ElButton type="primary" @click="jump">加入</ElButton>
          </template>
          <ElDescriptionsItem label="联系电话">{{ org.call }}</ElDescriptionsItem>
          <ElDescriptionsItem label="成立时间">{{ org.createAt }}</ElDescriptionsItem>
          <ElDescriptionsItem label="主播规模">{{ org.anchorSize }}</ElDescriptionsItem>

        </ElDescriptions>
      </div>
    </ElCard>

  </div>
</template>

<style lang='scss' scoped></style>
